// 网页最小宽度
@minWidth: 1170px;

* {
   padding    : 0px;
   margin     : 0px;
   box-sizing : border-box;
   list-style : none;
   font-family: "YakuHanJP,noto-sans-cjk-jp,Hiragino Kaku Gothic ProN,游ゴシック,YuGothic,Meiryo,Verdana,sans-serif";
}

a {
   text-decoration: none;
}

body {
   min-width: @minWidth;
}

img {
   vertical-align: bottom;
   max-width     : 100%;
   height        : auto;
}

.main {
   min-width      : @minWidth;
   position       : relative;
   width          : 100%;
   height         : calc(100vh - 117px);
   background     : url(./image/main_bg_pc.jpg) no-repeat center 25%;
   background-size: cover;
   animation      : bgZoom 60s ease forwards;

   .title {
      float      : left;
      margin-top : 30px;
      margin-left: 40px;
   }

   .main_atri {
      width          : 100%;
      margin         : 0 auto;
      background     : url(./image/main_chara_pc.png) no-repeat top center;
      background-size: contain;
      min-height     : 450px;
      max-height     : 100%;
      height         : 100%;
      max-width      : 1350px;
      z-index        : -999;
   }

   .info {
      position       : absolute;
      display        : flex;
      flex-direction : column;
      justify-content: space-around;
      right          : 10.28%;
      bottom         : 19.5%;
      width          : 34.2%;

      .logo {
         width        : 380px;
         margin       : 0 auto;
         margin-bottom: 20px;
      }


      .pc_links,
      .other_links {
         margin-top   : 20px;
         margin-bottom: 40px;
         width        : 410px;
         margin       : auto;

         .links_cup .img {
            text-align: center;
         }

         .link_items {
            display        : flex;
            flex-direction : row;
            justify-content: space-around;
            margin-bottom  : 50px;

            li {
               width : 128px;
               margin: 0 3px;
            }
         }
      }

      .other_links {
         display       : flex;
         flex-direction: row;

         .for_switch {
            display       : flex;
            flex-direction: column;
            width         : 142px;

            ul {
               display        : flex;
               flex-direction : row;
               justify-content: center;

               li {
                  width: 106px;
               }
            }
         }

         .for_app {
            width: 262px;

            ul {
               display        : flex;
               flex-direction : row;
               justify-content: center;
               text-align     : center;

               li {
                  height: 50px;
               }

               .apple {
                  width       : 114px;
                  margin-right: 4px;
               }

               .google {
                  width: 129px;
               }
            }

         }
      }
   }
}

.header {
   min-width       : @minWidth;
   position        : absolute;
   width           : 100%;
   background-color: rgb(255, 255, 255);

   .news {
      height   : 42px;
      font-size: 14px;

      &:hover {
         li {
            opacity   : 1;
            transition: all .3s;
         }

      }

      ul {
         display       : flex;
         flex-direction: column-reverse;
         position      : relative;

         li {
            width           : 100%;
            height          : 42px;
            line-height     : 42px;
            padding-left    : 55px;
            position        : absolute;
            background-color: #99bbff;
            opacity         : 0;
            transition      : all .3s;
         }

         li:nth-child(1) {
            transform: translateY(100%);
            opacity  : 1;
         }

         @gap: 3%;

         li:nth-child(2) {
            transform: translateY(-@gap);
         }

         li:nth-child(3) {
            transform: translateY(-2*@gap - 100%);
         }
      }
   }

   .nav {
      height  : 75px;
      padding : 10px 30px 9px;
      position: relative;

      .nav_in {
         display: flex;
         width  : 100%;
         height : 100%;

         .nav_l {
            width: calc(100% - 340px);

            .nav_list {
               display       : flex;
               vertical-align: baseline;

               li {
                  width     : fit-content;
                  position  : relative;
                  margin    : 0 10px;
                  height    : 56px;
                  padding   : 20px 8px;
                  font-size : 14px;
                  transition: all .3s;

                  &:hover {
                     color: #8eceee;
                  }

                  a {
                     display : block;
                     position: absolute;
                     top     : 0;
                     left    : 0;
                     width   : 100%;
                     height  : 100%;
                     cursor  : pointer;
                  }
               }
            }
         }

         .nav_r {
            display    : flex;
            width      : 340px;
            align-items: center;

            .nav_share {
               display    : flex;
               width      : 208px;
               font-size  : 10px;
               align-items: center;

               dd {
                  background     : no-repeat center;
                  background-size: cover;
                  width          : 22px;
                  height         : 22px;
                  margin-left    : 16px;
               }

               .tw {
                  margin-left     : 30px;
                  background-image: url(./image/icon_twitter_dark.png);
               }

               .fb {
                  background-image: url(./image/icon_facebook_dark.png);
               }

               .line {
                  background-image: url(./image/icon_line_dark.png);
               }
            }

            .nav_sound {
               display        : flex;
               justify-content: space-between;
               align-items    : center;
               width          : 82px;
               height         : 30px;
               font-size      : 12px;

               p.on {
                  width           : 26px;
                  height          : 30px;
                  background      : no-repeat center;
                  background-image: url(./image/sound_off_dark.png);
                  background-size : auto 20px;
                  font-size       : 0px;
               }

               p.off {
                  display: none;
               }
            }
         }
      }
   }
}

footer {
   position        : absolute;
   top             : 100vh;
   width           : 100%;
   min-width       : @minWidth;
   height          : 165px;
   border-top      : 1px solid #dbdbe3;
   padding         : 30px;
   display         : flex;
   justify-content : space-between;
   background-color: #fff;

   .foot_l {
      display       : flex;
      flex-direction: column;
      width         : 1000px;
      font-size     : 10px;

      .lang_and_link {
         display   : flex;
         margin-top: 14px;
         font-size : 13px;

         .foot_lang {
            display        : flex;
            justify-content: space-evenly;
            align-items    : center;
            width          : 100px;
            border-right   : 1px solid;

            p {
               display: inline-block;
               width  : fit-content;
            }
         }

         .foot_link {
            display        : flex;
            justify-content: space-evenly;
            height         : 20px;
            width          : 300px;
            font-size      : 11px;

            img {
               height: 15px;
            }
         }
      }

      .legal {
         margin-left: 20px;
         margin-top : 20px;

         a {
            color: #48aaff;
         }
      }

      .copy {
         margin-top : 5px;
         margin-left: 20px;
         color      : #a8a8a8;
      }
   }

   .foot_r {
      width                : 330px;
      min-width            : 330px;
      height               : 118px;
      display              : grid;
      grid-template-columns: repeat(2, 160px);
      grid-template-rows   : repeat(2, 50px);
      gap                  : 2px 5px;
      place-content        : space-evenly;

      li {
         overflow: hidden;

         img {
            height: 100%;
            border: #c8c8c8 solid 1px;
         }

         .makura {
            align-self: flex-start;
         }
      }
   }
}

@keyframes bgZoom {
   from {
      background-size: auto 750px;
   }

   to {
      background-size: auto 640px;
   }
}